* {
	font-family: helvetica,arial,sans-serif;
	font-size:12px;
}
body{
	padding:0px;
	margin:0px;
	background-color:#ccc;
}
.round-v{
	border:#aaa 1px solid;
	border-bottom:0px;
}
.round-v:last-child{
	border-radius:0px 0px 3px 3px;
	border-bottom:#aaa 1px solid;
}
.round-v:first-child{
	border-radius:3px 3px 0px 0px;
}
.round-v > .title{
	padding:5px;
	font-size:16px;
	color:#333;
	font-weight:bold;
}
.page{
	margin:10px auto 10px auto;
	width:640px;
}
.iframe-page{
	position: relative;
	background-color:#fff;
/* 	margin:10px auto 10px auto; */
/* 	width:100%; */
	height:100%;
}
.page > .title{
	background-color:#eee;
	padding:5px;
	font-size:16px;
	color:#333;
	font-weight:bold;
}
.page > .content{
	background-color:#fff;
	padding:0px;
}
.page > .menu{
	background-color:#ddd;
	padding:5px;
}
.page > .menu > a{
	display:inline-block;
	margin-right:5px;
	padding:5px 10px 5px 10px;
	background-color:#eee;
	border:#aaa 1px solid;
	border-radius:3px;
	text-decoration:none;
	font-weight:bold;
	color:#666;
}
.page > .menu > a:hover{
	background-color:#fff;
	color:#333;
	border-color:#333;
}
.f1{
	color:#333;
	font-weight:bold;
}
.f1 > .title{
	background-color:#eee;
	padding:3px;
	font-weight:bold;
	color:#666;
	font-size:12px;
}
.f1 > table{
	width:100%;
	border-collapse:collapse;
	background-color:#d8deea;
}
.f1 > table input{
	width:95%;
}
.f1 > table tr:nth-child(even) td{
	background-color:rgba(0,0,0,.1);
}
.f1 > .controls{
	text-align:right;
	background-color:#fff;
}
.dialog{
	background-color:#eee;
	margin:0px;
	padding:5px;
}
.init_trains{
	width:500px;
}
.init_trains td, .init_trains th{
	width:25%;
}
.init_trains tr :first-child{
	text-align:right;
}
.init_trains tr :last-child{
	text-align:left;
}
div[state=initialized]{
	background-color:lightgreen;
	border:darkgreen 1px solid;
	border-radius:3px;
	margin:0px 0px 5px 0px;
}
div[state=uninitialized]{
	background-color:#eee;
	border:#aaa 1px solid;
	border-radius:3px;
	margin:0px 0px 5px 0px;
}
div[state=error]{
	background-color:#FF5050; /* Red */
	border:#aaa 1px solid;
	border-radius:3px;
	margin:0px 0px 5px 0px;
}
div.section {
	border: #aaa 1px solid;
	border-radius: 3px;
	background-color: #f2f2f2;
/* 	width: 100%; */
	height: 100%;
	margin: 0 auto 0 auto;
/* 	padding: 4px; */
}
div.section_body {
	padding:6px;
}
div.section_body > input[type=button] {
	width:90px;
/* 	float:left; */
/* 	clear:left; */
/* 	text-align:center; */
}
div#train_section {
	width: 260px;
}
.button_holder {
	display:block;
	width:100%;
	text-align:center;
	margin-bottom:4px;
}
div.section_header {
	background-color: #ddd;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 6px;
	padding: 4px;
	border-bottom: #aaa 1px solid;
}
.camera_display{
	background: url('http://cf408wc.cs.wwu.edu/axis-cgi/mjpg/video.cgi') center center no-repeat;
	background-size:contain;
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}
.simple_switches {

}
.simple_switches > div{
	display:inline-block;
	width:50px;
	height:50px;
	line-height:50px;
	border:#aaa 2px solid;
	border-radius:50px;
	margin:3px;
	font-size:15px;
	font-weight:bold;
	color:#333;
	text-align:center;
	cursor: hand; cursor: pointer;
}
.simple_switches > div[state=closed]{
	border-color:darkgreen;
	background-color:lightgreen;
}
.simple_switches > div[state=thrown]{
	border-color:darkred;
	background-color:pink;
}
.simple_switches > div[state=changing]{
	border-color:darkorange;
	background-color:yellow;
}
.simple_switches > div[state=unknown]{
	background-color:#ddd;
}

.visual_switches {
	background-image:url('/images/vsl_bg_sm.jpg');
	width:450px;
	height:330px;
}
.visual_switches > div{
	position: absolute;
	width:10px;
	height:10px;
	line-height:10px;
	border:#aaa 2px solid;
	border-radius:5px;
	margin:3px;
	font-size:8px;
	font-weight:bold;
	color:#333;
	text-align:center;
	cursor: hand; cursor: pointer;
}
.visual_switches > div[state=closed]{
	border-color:darkgreen;
	background-color:lightgreen;
}
.visual_switches > div[state=thrown]{
	border-color:darkred;
	background-color:pink;
}
.visual_switches > div[state=changing]{
	border-color:darkorange;
	background-color:yellow;
}
.visual_switches > div[state=unknown]{
	background-color:#ddd;
}

.home_layout {
	width:100%;
}
.home_layout td{
/* 	width:50%; */
/* 	height:240px; */
/* 	border-collapse: collapse; */
/* 	border-spacing: 0; */
}
table.home_layout {
	border-collapse: separate;
	border-spacing: 8px;
}
tr.home_layout {
/* 	border-collapse: collapse; */
/* 	border-spacing: 0; */
}
.home_layout input[type=button]{
/* 	width:100%; */
/* 	height:30px; */
	font-size:15px;
}
input.open_throttle_button[type=button]{
	width:120px;
	height:30px;
	font-size:15px;
}
div.throttle_div {
	display: block;
	width: 100%;
}
input.open_emergency[type=button] {
	background-image: url(/images/emergency-gray.png);
	background-color: transparent;
	background-repeat: no-repeat;
	margin-left:8px;
	float: left;
	clear: right;
	border: none;
	cursor: pointer;
	width: 24px;
	height: 24px;
}
input.open_emergency[type=button]:hover {
	background-image: url(/images/emergency.png);
	background-color: transparent;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
}
.throttle .title{
	font-size:15px;
	padding:5px;
	background-color:#fff;
	color:#333;
	font-weight:bold;
}
.throttle table{
	width:100%;
}
.throttle input[type=range]{
	width:100%;
}
.m_dialog{
	position:absolute;
	border:#aaa 1px solid;
	border-radius:3px;
	padding:0px;
	background-color:#fff;
	top:0px;
	left:0px;
}
.m_dialog iframe{
	border:none;
	padding:0px;
	margin:0px;
	width:100%;
	height:100%;
	background-color:#fff;
}
.m_dialog .title{
	color:#666;
	font-weight:bold;
	margin:5px;
	background-color:#eee;
	line-height:20px;
	height:20px;
}
.m_dialog .title input[value=Close]{
	float:right;
	height:20px;
}
.m_dialog .content{
	resize:both;
	overflow:hidden;
	padding:0px 5px 5px 5px;
}

input.power_button[type=button] {
	font-size: 10px;
	height: 21px;
	width: 32px;
}

.button_gray {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}

.button_green {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#65BD65;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #519751;
	display:inline-block;
	color:#466E46;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #93D193;
}

.button_gold {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#CCCC00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #B8B800;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #E0E066;
}

.button_red {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#EB9999;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #BC7A7A;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #F1B8B8;
}

.button_gray:hover {
	background-color:#dfdfdf;
}
.button_gray:active {
	position:relative;
	top:1px;
}
input[disabled].button_gray, input[disabled].button_gray:hover, input[disabled].button_gray:active {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#BBBBBB;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}

span.system_status {
	margin-left: 3px;
	font-size: 14px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

#emer-toggle-button {
    background: #ccc;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;
    padding: 5px 5px;    
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;       
}

#emer-toggle-button.down {
    background: #bbb;
    border-top: solid 2px #777;
    border-left: solid 2px #777;
    border-bottom:solid 2px  #eaeaea;
    border-right: solid 2px #eaeaea;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}​
